<template>
	<div class="warning">
		<div class="right">
			<el-button @click="setting()">预警设置</el-button>
		</div>
		<div class="body">
			<div class="item">
				<div class="time">
					报警时间
				</div>
				<div class="desc">
					报警内容
				</div>
				<div class="from">
					来源
				</div>
				<div class='level'>舆情等级</div>	
				<div class="release">
					发布时间
				</div>
			</div>
			<div class="item" v-for="(item,index) in warnings" :key="index">
				<div class="time">
					<div class="hour">{{getHour(item.createTime)}}</div>
					<div class="date">{{getDate(item.createTime)}}</div>
				</div>
				
				<div class="desc" @click="openUrl(item.sourceUrl)" v-html="'舆情提示:'+filterHtml(item.content)">
						
				</div>
				<div class="from">
					{{item.source.length > 8 ? (item.source.substring(0,8)+'...') : item.source}}
				</div>
				<div class='level'>{{levels[parseInt(item.level)]}}</div>	
				<div class="release">
					<div class="data">{{getDateother(item.poTime)}}</div>
					<div class="time">{{getTimeother(item.poTime)}}</div>
				</div>
			</div>
			<!-- 分页 -->
		    <div class="pagination">
			    <el-pagination
			      @size-change="handleSizeChange"
			      @current-change="handleCurrentChange"
			      :current-page=1
			      :page-size="pageSize"
			      layout="total, prev, pager, next, jumper"
			      :total="total">
			    </el-pagination>
		    </div>
		</div>
	</div>
</template>
<script>
	import moment from 'moment'
	let levels = {1:'一般',2:'重大',1:'危机',}
	export default {
		name:'warning',
		data(){
			return{
				warnings:[],
				total:0,
				pageNum:1,
				pageSize:30,
				levels
          }
		},
		mounted(){
			this.getWarning()
		},
		methods:{
			filterHtml(value){
				return value.replace(/<br\/>/g, '').replace(/{{{/g,"<span class='light' style='color:red'>").replace(/}}}/g,"</span>")
			},
			getWarning(){
				this.$http.post('vrv-monitor-platform-web/alert/info/queryByOrgCode',{
					pageNum:this.pageNum,
					pageSize:this.pageSize
				}).then((res)=>{
					this.warnings = res.body.data
					this.total = res.body.total
				})
			},
			openUrl(url){
				// alert(url)
				window.open(url)
			},
			setting(){
				this.$router.push('/personal/warningsetting/wSetting');
			},
			getHour(value){
				return moment(value).format('HH:mm')
			},
			getDate(value){
				return moment(value).format('YYYY-MM-DD')
			},
			handleSizeChange(val) {
		        
			},
			handleCurrentChange(val) {
					this.pageNum = val
					this.getWarning()
			},
			getDateother(value){
			return moment(value).format('YYYY-MM-DD')
			},
			getTimeother(value){
				return moment(value).format('HH:mm:ss')
			},
		}
		
	}
</script>
<style scoped>
	.right{
		text-align: right;
		padding: 1.2rem 2rem;
	}
	.item{
		height: 3.8rem;
		display: flex;
		padding: 0 5.5rem;
		border-bottom: 1px solid #dcdcdc;
		line-height: 3.8rem;
		font-size: 0.88rem;
	}
	.item .time{
		width: 17rem;
	}
	.item .time div{
		height: 1.9rem;
		line-height: 2;
	}
	.item .desc{
		flex:1;
		overflow: hidden;
		white-space: nowrap;
		text-overflow:ellipsis;
		margin-right: 2rem;
		cursor: pointer;
	}
	.item .from{
		width: 10rem;
		flex:0 0 10rem;
		overflow: hidden;
		white-space: normal;
		text-overflow:ellipsis;
	}
	.level{
		width: 10rem;
		flex:0 0 10rem;
		overflow: hidden;
		white-space: normal;
		text-overflow:ellipsis;
	}
	.hour{
		color: #ee6941;
		font-size: 1.125rem;
		line-height: 3 !important;
	}
	.item .release{
		width: 10rem;
		flex:0 0 10rem;
	}
	.release div{
		width: 100% !important;
		text-align: left;
		height: 1.9rem;
		line-height: 2;
	}
	.release div:first-child{
		box-sizing:border-box;
		padding-top: 0.5rem;
	}

	.pagination{
		text-align: right;
		padding: 0.93rem 0.93rem;
	}
</style>